<template>
  <div class="shishi">
  <div class="shishi-b">
    <dv-border-box-10>

      <div class="common-title common-title-xiao">实时测温</div>

      <superslide :options="options" class="slideBox">
      <!-- slides -->
      <div class="bd">
        <ul>
          <li>
            <a href="javascript:;" class="shishi-left">
              <img src="http://kunlunpass.cn-bj.ufileos.com/kunlunpass/82b739032c004004bb7d356e81df7856.jpg"/>
            </a>
            <div class="shishi-right">
              <div class="xingming">姓名：张三</div>
              <div class="xingming">班级：</div>
              <div class="xingming">地点：</div>
              <div class="xingming">今日体温：<br/><b>36.8℃</b></div>
            </div>
          </li>
          <li>
            <a href="javascript:;" class="shishi-left">
              <img src="http://kunlunpass.cn-bj.ufileos.com/kunlunpass/82b739032c004004bb7d356e81df7856.jpg"/>
            </a>
            <div class="shishi-right">
              <div class="xingming">姓名：张三</div>
              <div class="xingming">班级：</div>
              <div class="xingming">地点：</div>
              <div class="xingming">今日体温：<br/><b>36.8℃</b></div>
            </div>
          </li>
          <li>
            <a href="javascript:;" class="shishi-left">
              <img src="http://kunlunpass.cn-bj.ufileos.com/kunlunpass/82b739032c004004bb7d356e81df7856.jpg"/>
            </a>
            <div class="shishi-right">
              <div class="xingming">姓名：张三</div>
              <div class="xingming">班级：</div>
              <div class="xingming">地点：</div>
              <div class="xingming">今日体温：<br/><b>36.8℃</b></div>
            </div>
          </li>
        </ul>
      </div>

      <!-- Optional controls slots -->
      <!-- slot="titCell" -->
      <div class="hd" slot="titCell">
        <ul>
          <li class="on"></li>
          <li class=""></li>
          <li class=""></li>
        </ul>
      </div>

    
    </superslide>
  </dv-border-box-10>
  </div></div>
</template>
<script>

export default {
    name: "slideBox",
    data () {
      return {
        options: {
          mainCell: ".bd ul",
          autoPlay: true,
          easing: 'swing',
          effect:"leftLoop"
        }
      }
    }
};
</script>
<style scoped="scoped" >
.common-title-xiao{  line-height: 45px; margin-bottom: 0px;}
.shishi{ background-color: rgba(6, 30, 93, 0.5);  }
.shishi .xingming{ border:1px solid #19c3eb; margin:5px auto; line-height: 25px; padding: 5px; border-top-right-radius:1em; color: #19c3eb;}
.shishi .xingming b{ font-weight: bolder;  font-size: 28px; }
.shishi  .slideBox {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
 .shishi .slideBox .hd {
    overflow: hidden;
    position: absolute;
    left: 43%;
    bottom: 5px;
    z-index: 1;
  }
 .shishi .slideBox .hd ul {
    overflow: hidden;
    zoom: 1;
    float: left;
  }
 .shishi .slideBox .hd ul li {
    float: left;
    margin-right: 2px;
    width: 10px;
    height: 10px;
    line-height: 14px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    list-style: none;
    border-radius: 50%;
  }
 .shishi .slideBox .bd ul{ padding: 0; margin: 20px; }
 .shishi .slideBox .hd ul li.on {
    background: #19c3eb;
    color: #fff;
  }
 .shishi .slideBox .bd {
    position: relative;
    height: 100%;
    z-index: 0;
  }
 .shishi .slideBox .bd li {
    list-style: none;
    zoom: 1;
    vertical-align: middle;
  }
 .shishi .slideBox .bd li p { position: absolute; top: 10%; right: 5%; z-index: 10000; background: #000; opacity: .4; color: #fff; display: inline-block; margin:0 auto; } 
 .shishi .slideBox .bd img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
 .shishi .shishi-left{ float: left; width: 45%;margin-left: 10px; margin-top: 8px; padding-bottom: 20px;}
 .shishi .shishi-right{ float: right;  margin-left: 8px; width: 45%;}

 
</style>